<template>
  <el-card>
    <div class="c-map" ref="cMapRef"></div>
  </el-card>
</template>

<script lang="ts">
export default {
  name: 'CMap',
}
</script>

<script lang="ts" setup>
import { ref, onMounted } from 'vue'
import * as echarts from 'echarts'
import china from './china.json'
const cMapRef = ref()
const data = [
  { name: '台湾', value: '5308029' },
  { name: '香港', value: '385789' },
  { name: '湖北', value: '68424' },
  { name: '上海', value: '63837' },
  { name: '吉林', value: '40312' },
  { name: '广东', value: '9021' },
  { name: '海南', value: '8791' },
  { name: '福建', value: '4075' },
  { name: '北京', value: '3982' },
  { name: '四川', value: '3689' },
  { name: '陕西', value: '3674' },
  { name: '浙江', value: '3381' },
  { name: '河南', value: '3282' },
  { name: '黑龙江', value: '3084' },
  { name: '山东', value: '2939' },
  { name: '内蒙古', value: '2396' },
  { name: '江苏', value: '2354' },
  { name: '云南', value: '2281' },
  { name: '广西', value: '2254' },
  { name: '天津', value: '2214' },
  { name: '河北', value: '2016' },
  { name: '辽宁', value: '1813' },
  { name: '安徽', value: '1506' },
  { name: '江西', value: '1474' },
  { name: '湖南', value: '1437' },
  { name: '甘肃', value: '1346' },
  { name: '新疆', value: '1131' },
  { name: '重庆', value: '990' },
  { name: '澳门', value: '793' },
  { name: '西藏', value: '766' },
  { name: '山西', value: '469' },
  { name: '贵州', value: '194' },
  { name: '青海', value: '190' },
  { name: '宁夏', value: '0' },
]
echarts.registerMap('china', china as any)

onMounted(() => {
  const myChart = echarts.init(cMapRef.value)
  const option = {
    title: {
      text: '新冠肺炎各地区累计确诊人数',
      left: 'center',
      top: 20,
    },
    tooltip: {},
    series: [
      {
        name: '累计确诊人数',
        type: 'map',
        map: 'china',
        data: data,
        label: {
          show: true,
          // 在文本中，可以对部分文本采用 rich 中定义样式。
          // 这里需要在文本中使用标记符号：
          // `{styleName|text content text content}` 标记样式名。
          // 注意，换行仍是使用 '\n'。
          formatter: (params: any) => {
            if (!params.value && !params.name.includes('南海')) {
              return ['{flag|}'].join('')
            }
            return params.name
          },
          rich: {
            flag: {
              backgroundColor: {
                image: './鸡.jpeg',
              },
              height: 20,
            },
          },
        },
      },
    ],
    visualMap: [
      {
        type: 'piecewise',

        inRange: {
          symbolSize: [30, 100],
        },
        pieces: [
          { min: 10000, color: '#B80909', symbol: 'rect' }, // 不指定 max，表示 max 为无限大（Infinity）。
          { min: 1000, max: 9999, color: '#E64546', symbol: 'rect' },
          { min: 100, max: 999, color: '#F57567', symbol: 'rect' },
          { min: 10, max: 99, color: '#FF9985', symbol: 'rect' },
          { min: 1, max: 9, color: '#FFE5DB', symbol: 'rect' },
          { min: 0, max: 0, color: '#eee', symbol: 'image://鸡.jpeg' }, // 不指定 min，表示 min 为无限大（-Infinity）。
        ],
      },
    ],
  }
  myChart.setOption(option)
  window.addEventListener('resize', () => {
    myChart.resize()
  })
})
</script>

<style scoped>
.c-map {
  height: 1000px;
}
</style>
